<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    <section th:if="${#lists.isEmpty(dataMap['list'])}" class="no-data__wrap" style="display: block;">
        <span class="no-data-ico"></span>
        <p class="mt20"><span class="c-666">没有学习记录~~~</span></p>
    </section>
    <th:block th:if="!${#lists.isEmpty(dataMap['list'])}" th:each="playRecord : ${dataMap['list']}">
        <div class="s-record-wrap">
            <aside th:if="!${#strings.isEmpty(playRecord['timeAxis'])}" class="pr s-r-year_wrap">
            <div class="s-r-year">
                <strong class="c-fff fs18" th:text="${playRecord['timeAxis']}+'年'"></strong>
                <em class="s-r-year_icon">&nbsp;</em>
            </div>
        </aside>
            <article class="s-record">
            <span class="s-r-sj">&nbsp;</span>
            <aside class="s-r-c-time">
                <span class="c-info fs16 mr20">
                    <th:block th:text="${#strings.substring(playRecord['updateTime'],5,7)}+'.'+${#strings.substring(playRecord['updateTime'],8,10)}+' '"></th:block>
                    <th:block th:text="${#strings.substring(playRecord['updateTime'],11,16)}"></th:block>
                </span>
                <em class="s-r-c-t">&nbsp;</em>
            </aside>
            <div class="media">
                <div class="media-left">
                    <a th:if="${playRecord['buyCourse']['courseTypeKey']}=='PACKAGE'" th:href="@{/web/uc/play/toPlayCourse?packageId={packageId}&courseId=0&catalogId={catalogId}&type=LOBBY(packageId=${playRecord['buyCourseId']},catalogId=${playRecord['catalogId']})}">
                        <img class="media-object lazy" width="171" th:attrappend="data-original=${playRecord['buyCourse']['imageMap']['pcUrlMap']['large']}" th:src="@{{path}/front/web/v3/img/default/default-course.gif(path=${staticPath})}"/>
                    </a>
                    <a th:if="${playRecord['buyCourse']['courseTypeKey']} !='PACKAGE'" th:href="@{/web/uc/play/toPlayCourse?packageId=0&courseId={courseId}&catalogId={catalogId}&type=LOBBY(courseId=${playRecord['buyCourseId']},catalogId=${playRecord['catalogId']})}">
                        <img class="media-object lazy" width="171" th:attrappend="data-original=${playRecord['buyCourse']['imageMap']['pcUrlMap']['large']}" th:src="@{{path}/front/web/v3/img/default/default-course.gif(path=${staticPath})}"/>
                    </a>
                </div>
                <div class="media-body pl10">
                    <div class="row">
                        <div class="col-sm-8">
                            <section class="hLh30 txtOf">
                                <strong>
                                    <a th:href="@{/web/uc/play/toPlayCourse?packageId={packageId}&courseId=0&catalogId=0&type=LOBBY(packageId=${playRecord['buyCourseId']})}" th:if="${playRecord['buyCourse']['courseTypeKey']}=='PACKAGE'" class="fs18 c-333 vam" th:text="${playRecord['buyCourse']['courseName']}"></a>
                                    <a th:href="@{/web/uc/play/toPlayCourse?packageId=0&courseId={courseId}&catalogId=0&type=LOBBY(courseId=${playRecord['buyCourseId']})}" th:if="${playRecord['buyCourse']['courseTypeKey']} !='PACKAGE'" class="fs18 c-333 vam" th:text="${playRecord['buyCourse']['courseName']}"></a>
                                </strong>
                            </section>
                            <section class="fs14 hLh20 txtOf mt5">
                                <span class="c-info vam" th:if="${playRecord['finish']}==1 and !${#maps.isEmpty(playRecord['durationMap'])}">
                                    <th:block th:text="${playRecord['durationMap']['h']}+'小时'+${playRecord['durationMap']['m']}+'分钟'+${playRecord['durationMap']['s']}+'秒'"></th:block>
                                </span>
                                <span class="c-info vam" th:if="${playRecord['finish']}==2">已完成学习</span>
                                <span class="c-info vam" th:if="${playRecord['finish']}==1 and ${#maps.isEmpty(playRecord['durationMap'])}">未学习</span>
                                <span class="ml10 c-999 vam" th:if="!${#maps.isEmpty(playRecord['courseCatalog'])}" th:text="${playRecord['courseCatalog']['catalogName']}"></span>
                            </section>
                        </div>
                        <div class="col-sm-4 mt10 text-right">
                            <a th:if="${playRecord['buyCourse']['courseTypeKey']}=='PACKAGE'" th:href="@{/web/uc/play/toPlayCourse?packageId={packageId}&courseId={courseId}&catalogId={catalogId}&type=LOBBY(packageId=${playRecord['buyCourseId']},courseId=${playRecord['courseId']},catalogId=${playRecord['catalogId']})}">
                                <button th:if="!${#maps.isEmpty(playRecord['courseCatalog'])} and ${playRecord['finish']}==1" type="button" class="btn btn-success btn-rounded mt10">
                                    <span th:text="${#maps.isEmpty(playRecord['durationMap'])}?'开始学习':'继续学习'"></span>
                                </button>
                                <button th:if="!${#maps.isEmpty(playRecord['courseCatalog'])} and ${playRecord['finish']}==2" type="button" class="btn btn-warning btn-rounded mt10">
                                    <span>重新学习</span>
                                </button>
                            </a>
                            <a th:if="${playRecord['buyCourse']['courseTypeKey']} !='PACKAGE'" th:href="@{/web/uc/play/toPlayCourse?packageId=0&courseId={courseId}&catalogId={catalogId}&type=LOBBY(courseId=${playRecord['courseId']},catalogId=${playRecord['catalogId']})}">
                                <button th:if="!${#maps.isEmpty(playRecord['courseCatalog'])} and ${playRecord['finish']}==1" type="button" class="btn btn-success btn-rounded mt10">
                                    <span th:text="${#maps.isEmpty(playRecord['durationMap'])}?'开始学习':'继续学习'"></span>
                                </button>
                                <button th:if="!${#maps.isEmpty(playRecord['courseCatalog'])} and ${playRecord['finish']}==2" type="button" class="btn btn-warning btn-rounded mt10">
                                    <span>重新学习</span>
                                </button>
                            </a>
                            <button th:if="${#maps.isEmpty(playRecord['courseCatalog'])}" type="button" disabled class="btn btn-default btn-rounded mt10">
                                <span>已被删除</span>
                            </button>
                        </div>
                    </div>
                    <section class="hLh30 txtOf mt10"   th:if="${playRecord['practiceExist']}">
                        <aside class="pull-right">
                            <span class="fs14 vam">
                                <i class="fa fa-file-text-o c-success" th:if="${playRecord['pass']}"></i>
                                <i class="fa fa-file-text-o c-danger" th:if="!${playRecord['pass']}"></i>
                                <small class="c-999 vam ml5" th:text="${playRecord['pass']}?'通过此节随堂练习':'未通过此节随堂练习'">通过此节随堂练习</small>


                                <a  th:if="${playRecord['pass']}"  class="c-info ml20 vam openReport" th:attrappend="data-pass=${playRecord['pass']},data-id=${playRecord['practiceId']},data-percen=${playRecord['scorePercent']},data-course=${playRecord['courseId']},data-byCourse=${playRecord['buyCourseId']},data-catalog=${playRecord['catalogId']}">
                                    查看结果 <i class="fa fa-angle-right"></i>
                                </a>
                                <a th:if="!${playRecord['pass']}"  th:attrappend="data-course=${playRecord['courseId']},data-byCourse=${playRecord['buyCourseId']},data-catalog=${playRecord['catalogId']},data-type=${playRecord['buyCourse']['courseTypeKey']}" class="c-danger ml20 vam learn">继续学习 <i class="fa fa-angle-right"></i></a>
                            </span>
                        </aside>
                        <aside class="pull-left"  th:if="!${#maps.isEmpty(playRecord['courseCatalog'])} and !${#maps.isEmpty(playRecord['courseCatalog']['teacher'])}">
                            <a href="javascript:;" data-toggle="tooltip" data-placement="top" class="c-danger" th:attrappend="data-original-title=${playRecord['courseCatalog']['teacher']['teacherName']}">
                                <img class="img-circle lazy-user" width="26" height="26" th:attrappend="data-original=${playRecord['courseCatalog']['teacher']['imageMap']['pcUrlMap']['large']}" th:src="@{{path}/front/web/v3/img/default/default-face.gif(path=${staticPath})}">
                            </a>
                        </aside>
                    </section>
                </div>
            </div>
        </article>
        </div>
    </th:block>
    <div data-th-replace="layout/user/user-center-page"></div>
</html>